﻿/******************************************************************************
* File description: CustomComboBox.qml
* Function: 自定义下拉菜单
* Current Version: 1.0.0
* Author: 张宇轩
* Date: 2024-08-07
*  -----
*  Copyright by 博坤生物 .
 *****************************************************************************/
import QtQuick 2.14
import QtQuick.Controls 2.14
import QtQuick.Controls.impl 2.14
import QtGraphicalEffects 1.14

Item {
    id: root

    property color curColor: "#1677FF"

    property int editWidth: 180*dp
    property int titleWidth: title === "" ? 0 : 80*dp
    property string title: ""
    property bool required: false
    property bool editable: true

    property double popHeight: 200*dp

    function getColor(){
        return curColor;
    }

    function getItemListHeight(){
        return 100*dp;
    }


    height: 40*dp
    width: titleWidth + editWidth

    Item{
        height: parent.height
        Text{
            text: title
            font.pixelSize: config.fontsize
            x: 0
            anchors.verticalCenter: parent.verticalCenter
        }
    }

    ComboBox {
        id: control
        height: parent.height
        width: editWidth
        x: titleWidth
        model: []


        // 下拉框中每一个选项的代理样式
        delegate: ItemDelegate {
        }

        // 显示框文本样式
        contentItem: Text {
            id: textInput
            text: "   "+curColor
            font.pixelSize: config.fontsize
            verticalAlignment: Text.AlignVCenter
            x: 10*dp
            clip: true
        }

        // 显示框背景样式
        background: Rectangle {
            anchors.fill: parent
            border.color: "#CCCCCC"
            radius: 3*dp
        }

        // 向下三角箭头
        indicator: Item {
            width: 55*dp;  height: 20*dp
            x: control.width - 60*dp
            y: control.height/2 - 10*dp
            Rectangle{              // 颜色
                height: 20*dp
                width: 25*dp
                color: curColor
            }Image {
                x: 30*dp
                height: 20*dp
                width: 25*dp
                source: "qrc:/picture/downarrow.png"
            }
        }

        // 下拉框（Popup）
        popup: Popup {
            id: popup
            width: control.width
            height: popHeight
            y: control.height+2*dp
            // popup的内容
            contentItem: Rectangle{
                radius: 3*dp
                height: popHeight;  width: control.width
                clip: true
                ColorPicker{
                    width: parent.width
                    height: parent.height
                    onColorChanged: {
                        curColor = c
                    }
                }
            }

            // popup的背景
            background: Rectangle {
                clip: true
                radius: 3*dp
                border.color: "#CCCCCC"
                layer.enabled: true  // 设置layer为enable
                // 阴影
                layer.effect: DropShadow {
                    radius: 21*dp
                    samples: 43
                    transparentBorder: true
                    color: "#4D002062"
                }
            }

            // 过渡效果
            enter: Transition {
                NumberAnimation {
                    property: "height"
                    from: 0
                    to: popHeight
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }
            exit: Transition {
                NumberAnimation {
                    property: "height"
                    from: popHeight
                    to: 0
                    duration: 200
                    easing.type: Easing.InOutQuad
                }
            }
        }

    }

    Rectangle{
        anchors.fill: control
        color: "#EEEEEE"
        opacity: 0.6
        MouseArea{
            anchors.fill: parent
            onReleased: {

            }
        }
        visible: !editable
    }


}
